<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            <!-- 改变元素的盒模型计算方式，使得元素的宽度和高度包括内容、内边距和边框 -->
            box-sizing: border-box;
        }
        .box{
            width:1200px;
            height:300px;
            margin: auto;
            display: flex;
        }
        .list{
            width:20%;
            height: 100%;
            padding: 10px;
        }
        .list .img{
            width:100%;
            height: 80%;
            overflow: hidden;
            position: relative;
        }
        img{
            width:100%;
            position: absolute;
            left:0;right:0;top:0;bottom:0;
            margin:auto;
        }
        .title{
            width:100%;
            height: 20%;
            text-align: center;
            font-size: 15px;
        }
    </style>
</head>
<body>
    <div class="box">
       {%for item in arr%}
       <div class="list">
           <div class="img">
               <!-- 双花括号 语法是模板语言中的一种常见语法，用于在HTML中嵌入动态内容，通常用于服务器端渲染的模板引擎 -->
               <img src="/static/img/{{data[item.id].img}}" alt="">
           </div>
           <div class="title">
               <h3>{{data[item.id].name}}</h3>
               {{item.angle}}
           </div>
       </div>
       {%endfor%}
   </div>
</body>
</html>